<template>
  <div class="content-details-container">
    <div class="content-main-container">
      <div class="content-main-wrap scrollbar-no-width">
        <div class="category-info">
          <div>
            所属栏目：{{ contentRecord._fullCategoryName }}
          </div>
          <el-popover
            placement="top"
            width="176"
            trigger="click">
            <div class="preview-qrcode-container">
              <div id="qrCode" ref="qrCodeDiv" class="qrcode" />
              <div class="scan-tip">手机扫码预览</div>
            </div>
            <i slot="reference" class="el-icon-mobile-phone color-primary common-cursor" title="手机扫码预览" />
          </el-popover>
        </div>
        <div class="title-info">
          <div v-if="contentRecord.isTop===1" class="tag-top">置顶</div>
          <div class="title">{{ contentRecord.title }}</div>
        </div>
        <div class="desc-info">
          <div class="desc-item">作者：{{ contentRecord.author }}</div>
          <div class="desc-item">发布时间：{{ contentRecord.publishDate | formatDate('yyyy-MM-dd hh:mm') }}</div>
          <div class="desc-item">是否同步素材库：{{ contentRecord.syncMaterialLibrary===1?'已同步':'未同步' }}</div>
          <div class="desc-item">状态：
            <span v-if="contentRecord.status===0" class="color-warning">草稿</span>
            <span v-if="contentRecord.status===1" class="color-info">未发布</span>
            <span v-if="contentRecord.status===2" class="color-primary">已发布</span>
            <span v-if="contentRecord.status===3" class="color-danger">回收站</span>
          </div>
        </div>
        <div class="content-content-warp " v-html="contentRecord.content" />
        <div class="content-content-desc">
          <div v-if="contentRecord.isOriginal===0" class="desc-item">
            <i class="el-icon-price-tag" />摘抄自：{{ contentRecord.source }} <el-link :href="contentRecord.sourceUrl" type="primary" target="_blank">{{ contentRecord.sourceUrl }} </el-link>
          </div>
          <div v-if="contentRecord.contentFiles.length>0" class="desc-item">
            <div style="width: 76px;"><i class="el-icon-link" />附件：</div>
            <FileItem :files="contentRecord.contentFiles" style="margin-top:0px !important;" @remove="false" />
          </div>
          <div v-if="images.length>0" class="desc-item">
            <div style="width: 91px;"><i class="el-icon-picture-outline" />封面图片：</div>
            <FileItem :files="images" style="margin-top:0px !important;" @remove="false" />
          </div>
        </div>
      </div>
      <div class="content-footer">
        <div class="content-footer-wrap">
          <div class="left">
            <el-button-group>
              <el-button icon="el-icon-arrow-left" :disabled="!pre" @click="handleNextOrPre(pre)">上一篇</el-button>
              <el-button :disabled="!next" @click="handleNextOrPre(next)">下一篇<i class="el-icon-arrow-right el-icon--right" /></el-button>
            </el-button-group>
          </div>

          <div class="right">
            <template v-if="contentRecord.isDeleted===0">
              <el-button v-if="contentRecord.status!==2" type="primary" @click="handleUpdate">编辑</el-button>
              <el-button v-if="[1].includes(contentRecord.status)" type="primary" @click="handleRelease">发布</el-button>
              <el-button v-if="[2].includes(contentRecord.status)" @click="handleRevokePublication">撤销发布</el-button>
              <el-button v-if=" contentRecord.status===2 && contentRecord.syncMaterialLibrary===1" @click="handleCancelSyncMaterialLibrary">撤销同步微信素材库</el-button>
              <el-button v-if=" contentRecord.status===2 && contentRecord.syncMaterialLibrary===0" @click="handleSyncMaterialLibrary">同步至微信素材库</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="handleMoveRecycleBin">移入回收站</el-button>
            </template>
            <template v-if="contentRecord.isDeleted===1">
              <el-button @click="handleRecovery">回收站回复</el-button>
            </template>

          </div>
        </div>
      </div>
    </div>
    <div class="data-main-container">
      <div class="data-label">流量数据</div>
      <div class="data-container">
        <div class="data-item">
          <div class="number-wrap">
            <div class="number">{{ contentRecord.views }}</div>
            <div class="unit">条</div>
          </div>
          <div class="data-item-name">浏览</div>
        </div>
        <div class="data-item">
          <div class="number-wrap">
            <div class="number">{{ contentRecord.comments }}</div>
            <div class="unit">条</div>
          </div>
          <div class="data-item-name">评论</div>
        </div>
        <div class="data-item">
          <div class="number-wrap">
            <div class="number">{{ contentRecord.collections }}</div>
            <div class="unit">条</div>
          </div>
          <div class="data-item-name">收藏</div>
        </div>
        <div class="data-item">
          <div class="number-wrap">
            <div class="number">{{ contentRecord.thumbUpNum }}</div>
            <div class="unit">条</div>
          </div>
          <div class="data-item-name">点赞</div>
        </div>
      </div>
      <el-tabs v-model="dataItemActive" class="common-tabs" stretch @tab-click="handleDataItemTabClick">
        <el-tab-pane label="评论" name="pl" />
        <el-tab-pane label="收藏" name="sc" />
        <el-tab-pane label="点赞" name="dz" />
      </el-tabs>
      <div class="data-list-container">
        <el-empty v-if="contentRecord.isAllowComment===0 && dataItemActive==='pl'" description="当前文章禁止评论" image-size="48">
          <el-link :underline="false" type="primary" @click="handleOpenAllowComment"> 开启评论</el-link>
        </el-empty>
        <div v-if="contentRecord.isAllowComment===1 && dataItemActive==='pl'" class="tr">
          <el-link :underline="false" type="danger" @click="handleCloseAllowComment"> 关闭评论</el-link>
        </div>
        <c-list
          v-if="contentRecord.isAllowComment===1 && dataItemActive==='pl'"
          :data-source="dataList"
          empty="暂无评论"
          item-layout="vertical"
          :hover="false"
          class="data-list-wrap">
          <template #item="{item}">
            <c-item :avatar="common.getFileView(item.createdUserAvatar)">
              <template #title>
                <span class="title">{{ item.createdUserName }}</span>
              </template>
              <template #titleTag>
                <el-tag v-if="item.status===1" size="mini" effect="plain">通过</el-tag>
                <el-tag v-if="item.status===0" type="warning" size="mini" effect="plain"> 待审</el-tag>
                <el-tag v-if="item.status===2" type="danger" size="mini" effect="plain"> 屏蔽</el-tag>

              </template>
              <template>
                {{ item.text }}
              </template>
              <template #actions>
                <span class="time">{{ item.gmtCreated | formatDate('yyyy-MM-dd hh:mm') }}</span>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more common-cursor" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-delete color-danger" @click.native="handleRemoveComment(item)">删除</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-check color-primary" :disabled="item.status===1" @click.native="memberCommentPass(item)">通过</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-close color-warning" :disabled="item.status===2" @click.native="memberCommentShield(item)">屏蔽</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </c-item>
          </template>
          <template v-show="dataTotal>0" #pagination>
            <pagination style="text-align: center;" :total="dataTotal" :page.sync="dataItemQuery.page" :limit.sync="dataItemQuery.limit" :background="false" layout="prev,pager,next" @pagination="initDataItems" />
          </template>
        </c-list>

        <c-list
          v-if="dataItemActive==='sc'"
          :data-source="dataList"
          empty="暂无收藏"
          item-layout="vertical"
          :hover="false"
          class="data-list-wrap">
          <template #item="{item}">
            <c-item :avatar="common.getFileView(item.createdUserAvatar)">
              <template #title>
                <span class="title">{{ item.createdUserName }}</span>
                <span class="desc">收藏了文章</span>
              </template>
              <template>
                <span class="time">{{ item.gmtCreated | formatDate('yyyy-MM-dd hh:mm') }}</span>
              </template>
            </c-item>
          </template>
          <template v-show="dataTotal>0" #pagination>
            <pagination style="text-align: center;" :total="dataTotal" :page.sync="dataItemQuery.page" :limit.sync="dataItemQuery.limit" :background="false" layout="prev,pager,next" @pagination="initDataItems" />
          </template>
        </c-list>
        <c-list
          v-if="dataItemActive==='dz'"
          :data-source="dataList"
          empty="暂无点赞"
          item-layout="vertical"
          :hover="false"
          class="data-list-wrap">
          <template #item="{item}">
            <c-item :avatar="common.getFileView(item.createdUserAvatar)">
              <template #title>
                <span class="title">{{ item.createdUserName }}</span>
                <span class="desc">点赞了文章</span>
              </template>
              <template>
                <span class="time">{{ item.gmtCreated | formatDate('yyyy-MM-dd hh:mm') }}</span>
              </template>
            </c-item>
          </template>
          <template v-show="dataTotal>0" #pagination>
            <pagination style="text-align: center;" :total="dataTotal" :page.sync="dataItemQuery.page" :limit.sync="dataItemQuery.limit" :background="false" layout="prev,pager,next" @pagination="initDataItems" />
          </template>
        </c-list>
      </div>
    </div>
    <syncWxPub ref="syncWxPub" @success="fetchData" />

  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import syncWxPub from './syncWxPub.vue'

export default {
  components: { syncWxPub },
  data() {
    return {
      next: null,
      pre: null,
      contentRecord: {
        contentFiles: []
      },
      images: [],
      dataItemActive: 'pl',
      dataItemQuery: {
        page: 1,
        limit: 20,
        sort: '-gmtCreated'
      },
      dataList: [],
      dataTotal: 0
    }
  },
  computed: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.contentRecord = await this.$store.dispatch('contentArticleGetDetailsById', this.$route.params.id)
      this.contentRecord = {
        ...this.contentRecord,
        contentFiles: this.contentRecord.file ? this.contentRecord.file.split(',') : []
      }
      this.images = []
      if (this.contentRecord.image1) {
        this.images.push(this.contentRecord.image1)
      }
      if (this.contentRecord.image2) {
        this.images.push(this.contentRecord.image2)
      }
      if (this.contentRecord.image3) {
        this.images.push(this.contentRecord.image3)
      }
      var preAndNext = await this.$store.dispatch('contentArticleFindPreAndNext', { id: this.contentRecord.id, categoryId: this.contentRecord.categoryId, isAll: false })
      this.next = preAndNext.next
      this.pre = preAndNext.pre
      this.handlePreview()
      this.initDataItems()
    },
    /* 编辑*/
    handleUpdate() {
      this.$router.push({ name: 'contentCreate', query: { id: this.contentRecord.id }})
    },
    // 发布
    handleRelease() {
      this.$confirm(`您确定要发布【${this.contentRecord.title}】, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleRelease', [this.contentRecord.id]).then(response => {
          this.fetchData()
          this.$modal.msgSuccess('发布成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    // 撤销发布
    handleRevokePublication() {
      this.$confirm(`您确定要撤销发布的【${this.contentRecord.title}】, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleRevokePublication', [this.contentRecord.id]).then(response => {
          this.fetchData()
          this.$modal.msgSuccess('撤销成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    // 恢复
    handleRecovery() {
      this.$confirm(`您确定要从回收站中恢复【${this.contentRecord.title}】, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleRecovery', [this.contentRecord.id]).then(response => {
          this.fetchData()
          this.$modal.msgSuccess('恢复成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    // 移入回收站
    handleMoveRecycleBin(row) {
      this.$confirm(`您确定要将【${this.contentRecord.title}】移入回收站, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleMoveRecycleBin', [this.contentRecord.id]).then(response => {
          this.fetchData()
          this.$modal.msgSuccess('移入回收站成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    handleSyncMaterialLibrary() {
      this.$confirm(`您确定要将【${this.contentRecord.title}】同步至微信素材库, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.syncWxPub.init({ id: this.contentRecord.id, title: this.contentRecord.title })
      }).catch(() => { })
    },
    handleCancelSyncMaterialLibrary() {
      this.$confirm(`您确定要将【${this.contentRecord.title}】从微信素材库取消同步, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleRevokeWxPub', this.contentRecord.id).then(response => {
          this.$modal.msgSuccess('撤销成功!')
          this.fetchData()
        }).catch(() => {
        })
      }).catch(() => { })
    },
    handlePreview() {
      this.$nextTick(() => {
        document.getElementById('qrCode').innerHTML = ''
        new QRCode(this.$refs.qrCodeDiv, { //
          text: this.T.getUrl() + '#/article/h5/preview/' + this.contentRecord.id,
          width: 120,
          height: 120,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
      })
    },
    handleNextOrPre(data) {
      if (!data) {
        this.$modal.msgWarning('已经是最后一篇了！')
        return
      }
      this.$router.push({ name: 'contentDetails', params: { id: data.id }})
      const view = this.$route
      delete view.icon
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {})
    },
    handleOpenAllowComment() {
      this.$confirm(`您确定要开启【${this.contentRecord.title}】评论, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleSetAllowComment', {
          id: this.contentRecord.id,
          allow: true
        }).then(response => {
          this.fetchData()
          this.$modal.msgSuccess('设置成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    handleCloseAllowComment() {
      this.$confirm(`您确定要关闭【${this.contentRecord.title}】评论, 是否继续?`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('contentArticleSetAllowComment', {
          id: this.contentRecord.id,
          allow: false
        }).then(response => {
          this.fetchData()
          this.$modal.msgSuccess('设置成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    initDataItems() {
      console.log(this.$route.params.id)
      this.dataList = []
      if (this.dataItemActive === 'pl') {
        if (this.contentRecord.isAllowComment === 0) {
          return
        }

        this.dataItemQuery = {
          ...this.dataItemQuery,
          moduleId: this.$route.params.id,
          module: 'MEMBER_COMMENT_MODULE_ARTICLE',
          sort: '-gmtCreated'

        }
        this.$store.dispatch('memberCommentPage', this.dataItemQuery).then((res) => {
          this.dataList = res.records
          this.dataTotal = res.total
        })
      }
      if (this.dataItemActive === 'sc') {
        this.dataItemQuery = {
          ...this.dataItemQuery,
          moduleId: this.$route.params.id,
          module: 'MEMBER_COLLECTION_LIKE_MODULE_ARTICLE',
          type: 'MEMBER_COLLECTION_LIKE_SC'
        }
        this.$store.dispatch('memberCollectionLikePage', this.dataItemQuery).then((res) => {
          this.dataList = res.records
          this.dataTotal = res.total
        })
      }
      if (this.dataItemActive === 'dz') {
        this.dataItemQuery = {
          ...this.dataItemQuery,
          moduleId: this.$route.params.id,
          module: 'MEMBER_COLLECTION_LIKE_MODULE_ARTICLE',
          type: 'MEMBER_COLLECTION_LIKE_DZ'
        }
        this.$store.dispatch('memberCollectionLikePage', this.dataItemQuery).then((res) => {
          this.dataList = res.records
          this.dataTotal = res.total
        })
      }
    },
    handleDataItemTabClick() {
      this.initDataItems()
    },
    handleRemoveComment(row) {
      const ids = [row.id]
      this.$confirm('您确定要删除这条评论, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('memberCommentRemove', ids).then(response => {
          this.initDataItems()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    memberCommentPass(row) {
      this.$confirm('您确定要通过此条评论, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('memberCommentPass', row.id).then(response => {
          this.initDataItems()
          this.$modal.msgSuccess('审批成功')
        }).catch(() => {})
      }).catch(() => { })
    },
    memberCommentShield(row) {
      this.$confirm('您确定要屏蔽此条评论, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('memberCommentShield', row.id).then(response => {
          this.initDataItems()
          this.$modal.msgSuccess('屏蔽成功')
        }).catch(() => {})
      }).catch(() => { })
    }

  }
}
</script>
<style scoped lang="scss">
  .content-details-container{
    display: flex;
    flex-direction: row;
    height: 100%;
    min-width: 1200px;
    .content-main-container{
      flex: 1;
      display: flex;
      flex-direction: column;
      .content-main-wrap{
        width: 850px;
        height: 100%;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 0 20px;
        font-size: 14px;
        color: #737373;
        overflow: auto;
        .category-info{
          color: #999999;
          margin: 20px 0 8px 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .title-info{
          display: flex;
          flex-direction: row;
          margin-bottom: 15px;
          .tag-top{
            width: 50px;
            height: 27px;
            background: #e5352b;
            border-radius: 2px;
            text-align: center;
            line-height: 27px;
            color: #ffffff;
            font-size: 14px;
            margin-top: 8px;
            margin-right: 10px;
          }
          .title{
            font-size: 28px;
            color: #333333;
            font-weight: bold;
          }
        }
        .desc-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .content-content-warp{
          padding: 11px;
          color: #4A4A4A;
          ::v-deep img{
            width: 100%;
          }
        }
        .content-content-desc{
          padding: 11px;
          margin-bottom: 100px;
          .desc-item{
            font-size: 13px;
            color: #525252;
            margin-bottom: 12px;
            display: flex;
            flex-direction: row;
            align-items: baseline;
            i{
              margin-right: 5px;
            }
          }
        }
      }
      .content-footer{
        height: 70px;
        background: #fff;
        border-top: 1px solid #e5e6eb;
        .content-footer-wrap{
          width: 850px;
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          padding-top: 18.6px;
          justify-content: space-between;
          .left{
            display: flex;
            flex-direction: row;
          }
          .number{
            line-height: 33px;
            padding: 0 25px;
          }
          .right{
          }
        }
      }
    }
    .data-main-container{
      width: 300px;
      background: #ffffff;
      border: 1px solid #e5e6eb;
    }
  }
  .data-main-container{
    padding: 0 15px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .data-label{
      font-size: 15px;
      color: #4A4A4A;
      height: 45px;
      line-height: 45px;
    }
    .data-container{
      background-color: #f6f7f9;
      border-radius: 4px;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 24px;
      .data-item{
        float: left;
        width: 134px;
        text-align: center;
        padding: 15px;
        .number-wrap{
          display: flex;
          flex-direction: row;
          justify-content: center;
          font-weight: bold;
          color: #737373;
          .number{
            font-size: 25px;
          }
          .unit{
            font-size: 12px;
            display: flex;
            align-items: center;
            margin-left: 3px;
          }
        }
        .data-item-name{
          font-size: 14px;
          color: #bcbcbc;
          margin-top: 3px;
        }
      }
    }
    .data-list-container::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    .data-list-container{
      flex: 1;
      overflow: auto;
      display: flex;
      flex-direction: column;
      .data-list-wrap{
        ::v-deep .c-list-item-meta-title{
          .title{
            font-size: 14px;
            font-weight: 600;
            color: #333333;
            margin-right: 6px;
          }
          .desc{
            color: #777777;
            margin-left: 6px;
            font-size: 13px;
            font-weight: normal;
          }
        }
        ::v-deep .c-list-item-content{
          color: #777777;
          .time{
            font-size: 13px;
            font-weight: 400;
            color: #888888;
          }
        }
        ::v-deep .c-list-item-action{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .time{
            font-size: 12px;
            font-weight: 400;
            color: #888888;
          }
        }
      }
    }
  }
</style>
